<template>
  <div>
    <div class="fp-header-container">
      <div class="fp-logo">
        <a href="/"><img src="/logo_font.png" style="height: 30px"></a>
      </div>
      <div class="fp-header-button-container">
        <el-tooltip content="新建" placement="bottom" class="tipV">
          
            <fp-button @click="create">
              新建
              <el-badge value="Step1" class="badge_item">
                
              </el-badge>
            </fp-button>
          
        </el-tooltip>
        <el-tooltip content="生成代码" placement="bottom">
          <fp-button @click="editor.showCode = true">代码</fp-button>
        </el-tooltip>
        <el-divider direction="vertical"></el-divider>
        <el-tooltip content="撤销" placement="bottom">
          <fp-button :disabled="!canUndo" @click="undo"><i class="iconfont icon-chexiao"></i></fp-button>
        </el-tooltip>
        <el-tooltip content="重做" placement="bottom">
          <fp-button :disabled="!canRedo" @click="redo"><i class="iconfont icon-zhongzuo"></i></fp-button>
        </el-tooltip>
        <el-tooltip content="保存" placement="bottom">
          <!-- <el-badge value="Step2" class="badge_item"> -->
            <fp-button @click="save"><i class="iconfont icon-baocun"></i>
              <el-badge value="Step2" class="badge_item"></el-badge>
            </fp-button>
          <!-- </el-badge> -->
        </el-tooltip>
        <el-tooltip content="预览" placement="bottom">
          <fp-button @click="preview"><i class="iconfont icon-yulan"></i></fp-button>
        </el-tooltip>
        <el-tooltip content="下载" placement="bottom">
          <fp-button @click="download"><i class="iconfont icon-xiazai1"></i></fp-button>
        </el-tooltip>
      </div>
      <div class="fp-header-residue-container-right">批量生成图片次数:{{remaining_search_count}}</div>
      <div class="fp-header-button-container-right">
        <fp-Header-User-info-edition />
      </div>
    </div>
    <div id="imgViewer">
      <img ref="previewImg">
    </div>
  </div>
</template>

<script>
import download from 'downloadjs'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import FpButton from "../common/FpButton"
import FpHeaderUserInfo from "./FpHeaderUserInfo"
import FpHeaderUserInfoEdition from "./FpHeaderUserInfoEdition"
import http from '../../../api/fastposter'
export default {
  name: "FpDesignHeader",
  components: {  FpButton ,FpHeaderUserInfoEdition},
  comments: {
    FpButton
  },
  data() {
    return {
      baseURL: window.API_URL,
      viewer: null,
      imgUrl: '',
      remaining_search_count:0
    }
  },
  computed: {
    ...mapState({
      p: state => state.poster.p,
      editor: state => state.editor
    }),
    ...mapGetters({
      'canUndo': 'snapshots/canUndo',
      'canRedo': 'snapshots/canRedo',
    })
  },
  mounted() {
    this.verifyTimes()
  },
  methods: {
    ...mapActions({
      'savePoster': 'poster/savePoster',
      'createPoster': 'poster/createPoster',
      'previewPoster': 'poster/previewPoster',
      'loadPosters': 'panelposter/getItems'
    }),
    ...mapMutations({
      'undo': 'snapshots/undo',
      'redo': 'snapshots/redo',
      'clear': 'snapshots/clear',
    }),
    create() {
      this.$confirm('确定要新建海报么?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.clear()
        this.createPoster()
      })
    },
    save() {
      this.savePoster().then(r => {
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 1000
        })
        this.loadPosters()
      })
    },
    preview() {
      const img = this.$refs.previewImg
      this.previewPoster().then(r => {
        img.src = window.URL.createObjectURL(r)
        const viewer = new Viewer(document.getElementById('imgViewer'), {
          hide() {
            viewer.destroy()
          }
        })
        viewer.show()
      })
    },
    download() {

      this.previewPoster().then(blob => {
        download(blob, this.p.name + "." + this.p.type, "", "image/png")
      })
    },
    verifyTimes(){
      http.reqResidueTimes().then(res => {
        
          this.remaining_search_count = res.data.remaining_search_count
        
      })
    },
  }
}
</script>

<style scoped>
.fp-header-container {
  height: 55px;
  background-color: #fff;
  border-bottom: 1px solid #eef0f0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
}



.fp-logo a {
  text-decoration: none;
  font-size: 22px;
  font-weight: 400;
}

.fp-header-button-container {
  margin-left: 10px;

  
}


.fp-btn,
.fp-btn.is-plain {
  background-color: #fff;
}

.fp-header-button-container-right {
  position: absolute;
  right: 0;
  display: flex;
  width: 100px;
  align-items: center;
  justify-content: space-evenly;
}

/* .fp-header-button-container-right.github {
  position: absolute;
  right: 100px;
  background-color: aquamarine;
} */

.fp-header-button-container-right .iconfont {
  font-size: 26px;
}

.fp-header-button-container-right a {
  text-decoration: none;
}
.fp-header-residue-container-right{
  position: absolute;
  right: 150px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 14px;
}
</style>
<style lang="scss" scoped>
  .tipV{
    position: relative;
    
  }
   /deep/.el-badge__content {
      position: absolute;
      background-color: transparent;
      color: red;
      left: -15px;
      // right: 35px;
      top: -25px;
      
      border: 0;
    } 
</style>